<template>
  <!-- 小雪花动画登录页面 -->
  <div class="login-container">
    <div class="login-bg">
      <div class="particles">
        <div
          v-for="i in 30"
          :key="i"
          class="particle"
          :style="particleStyle(i)"
        ></div>
      </div>
    </div>

    <div class="login-form">
      <div class="form-header">
        <h1>欢迎登录</h1>
        <p>DCS数据控制系统</p>
      </div>
<!--   ref="loginForm" -->
      <el-form
      
        :model="loginForm"
        :rules="loginRules"
        class="form-content"
      >
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            prefix-icon="User"
            size="large"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="Lock"
            size="large"
            show-password
          />
        </el-form-item>

        <!-- <el-form-item prop="code">
          <div class="code-input">
            <el-input
              v-model="loginForm.code"
              placeholder="验证码"
              prefix-icon="Key"
              size="large"
            />
            <div class="code-image" @click="refreshCode">
              <img :src="codeUrl" alt="验证码" />
            </div>
          </div>
        </el-form-item> -->

        <el-form-item>
          <el-button
            type="primary"
            size="large"
            class="login-btn"
            @click="handleLogin"
          >
            登 录
          </el-button>
        </el-form-item>
      </el-form>

      <!-- <div class="form-footer">
        <div class="links">
          <a href="#">忘记密码</a>
          <span>|</span>
          <a href="#">注册账号</a>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const router = useRouter();

// 登录表单数据
const loginForm = ref({
  username: "",
  password: "",
  code: "",
});

// 验证码URL
const codeUrl = ref("");
const codeKey = ref("");

// 表单验证规则
const loginRules = {
//   username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
//   password: [
//     { required: true, message: "请输入密码", trigger: "blur" },
//     { min: 6, max: 18, message: "长度在6到18个字符", trigger: "blur" },
//   ],
  //   code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
};

// 生成随机粒子样式
const particleStyle = (i) => {
  return {
    left: `${Math.random() * 100}%`,
    top: `${Math.random() * 100}%`,
    width: `${Math.random() * 10 + 5}px`,
    height: `${Math.random() * 10 + 5}px`,
    opacity: Math.random() * 0.5 + 0.1,
    animationDelay: `${Math.random() * 5}s`,
  };
};

// 刷新验证码
const refreshCode = () => {
  codeKey.value = Date.now();
  codeUrl.value = `/api/captcha?key=${codeKey.value}`;
};

// 登录处理
const handleLogin = async () => {
  const success = await userStore.login({
    username: loginForm.value.username,
    password: loginForm.value.password,
  });
};

// 初始化验证码
onMounted(() => {
  //   refreshCode();
});
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);

  .login-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1; // 添加这行
    .particles {
      position: absolute;
      width: 100%;
      height: 100%;
     z-index: 1; // 添加这行
      .particle {
        position: absolute;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        animation: float 15s infinite linear;

        @keyframes float {
          0% {
            transform: translateY(0) rotate(0deg);
          }
          100% {
            transform: translateY(-100vh) rotate(360deg);
          }
        }
      }
    }
  }

  .login-form {
    position: relative;
    width: 450px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    z-index: 10;

    .form-header {
      text-align: center;
      margin-bottom: 30px;

      h1 {
        font-size: 28px;
        color: #333;
        margin-bottom: 10px;
      }

      p {
        font-size: 16px;
        color: #666;
      }
    }

    .form-content {
      .el-input {
        :deep(.el-input__wrapper) {
          background: rgba(255, 255, 255, 0.8);
        }
      }

      .code-input {
        display: flex;

        .el-input {
          flex: 1;
          margin-right: 10px;
        }

        .code-image {
          width: 120px;
          height: 40px;
          border: 1px solid #ddd;
          border-radius: 4px;
          cursor: pointer;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }

      .login-btn {
        width: 100%;
        margin-top: 10px;
        font-size: 16px;
        letter-spacing: 5px;
      }
    }

    .form-footer {
      margin-top: 20px;
      text-align: center;

      .links {
        color: #999;
        font-size: 14px;

        a {
          color: #666;
          text-decoration: none;
          margin: 0 10px;

          &:hover {
            color: #409eff;
          }
        }
      }
    }
  }
}
</style>
